<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础测试</title>
    <link rel="stylesheet" href="assets/css/style.css">
    <style>
        body { padding: 20px; font-family: Arial, sans-serif; }
        .test-btn {
            padding: 10px 20px;
            margin: 5px;
            background: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .test-btn:hover { background: #0056b3; }
        .test-btn.active { background: #28a745; }
        .nav-card {
            border: 1px solid #ddd;
            margin: 10px;
            padding: 15px;
            border-radius: 8px;
            background: white;
            transition: all 0.3s;
        }
        .nav-card.hidden {
            display: none;
        }
        .debug-info {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <h1>基础标签过滤测试</h1>

    <div class="debug-info">
        <h3>调试信息</h3>
        <p>这是最基础的测试，不使用任何复杂的JavaScript系统</p>
    

    <!-- 简化的标签 -->
    <div style="margin-bottom: 20px;">
        <button class="test-btn active" onclick="filterByTag('推荐')">推荐 (15)</button>
        <button class="test-btn" onclick="filterByTag('综合')">综合 (20)</button>
        <button class="test-btn" onclick="filterByTag('风景')">风景 (31)</button>
        <button class="test-btn" onclick="filterByTag('人物')">人物 (26)</button>
        <button class="test-btn" onclick="showAll()">显示全部</button>
    

    <!-- 模拟导航卡片 -->
    <div id="nav-cards">
        <div class="nav-card" data-tags="推荐,综合">
            <h4>Pixabay</h4>
            <p>全球最大的免费图片站</p>
            <small>标签: 推荐,综合</small>
        

        <div class="nav-card" data-tags="推荐,风景">
            <h4>Unsplash</h4>
            <p>海量图库，分类超全</p>
            <small>标签: 推荐,风景</small>
        

        <div class="nav-card" data-tags="综合,风景,人物">
            <h4>Pexels</h4>
            <p>免费高质量图片</p>
            <small>标签: 综合,风景,人物</small>
        

        <div class="nav-card" data-tags="免扣">
            <h4>Pngimg</h4>
            <p>PNG图片资源</p>
            <small>标签: 免扣</small>
        

        <div class="nav-card" data-tags="艺术">
            <h4>梵高博物馆</h4>
            <p>艺术作品收藏</p>
            <small>标签: 艺术</small>
        
    

    <script>
        console.log('=== 基础测试开始 ===');

        function filterByTag(tagName) {
            console.log(`🏷️ 过滤标签: ${tagName}`);

            // 更新按钮状态
            document.querySelectorAll('.test-btn').forEach(btn => {
                btn.classList.remove('active');
            });
            event.target.classList.add('active');

            // 过滤卡片
            const cards = document.querySelectorAll('.nav-card');
            let visibleCount = 0;

            cards.forEach(card => {
                const cardTags = card.getAttribute('data-tags');
                console.log(`检查卡片: ${card.querySelector('h4').textContent}, 标签: [${cardTags}]`);

                if (cardTags && cardTags.includes(tagName)) {
                    card.classList.remove('hidden');
                    visibleCount++;
                    console.log(`✅ 显示卡片: ${card.querySelector('h4').textContent}`);
                } else {
                    card.classList.add('hidden');
                    console.log(`❌ 隐藏卡片: ${card.querySelector('h4').textContent}`);
                }
            });

            console.log(`📊 过滤完成，显示 ${visibleCount} 个卡片`);
        }

        function showAll() {
            console.log('📂 显示所有卡片');
            document.querySelectorAll('.nav-card').forEach(card => {
                card.classList.remove('hidden');
            });

            // 更新按钮状态
            document.querySelectorAll('.test-btn').forEach(btn => {
                btn.classList.remove('active');
            });
        }

        document.addEventListener('DOMContentLoaded', () => {
            console.log('🎯 页面加载完成');
            console.log(`📊 卡片总数: ${document.querySelectorAll('.nav-card').length}`);

            // 自动测试推荐标签
            setTimeout(() => {
                console.log('🧪 自动测试推荐标签...');
                const recommendBtn = document.querySelector('[onclick*="推荐"]');
                if (recommendBtn) {
                    recommendBtn.click();
                }
            }, 1000);
        });
    </script>
</body>
</html>